<template>
    <div class="content-list">
        <ul class="section-content">
            <li
                    class="content-item"
                    v-for="(item, index) in contentList"
                    :key="index"
            >
                <!-- 有item.name是歌手,没有则是歌单 -->
                <div class="kuo" @click="goAlbum(item, item.name)">
                    <!-- v-lazy懒加载 -->
                    <img class="item-img" v-lazy="item.pic" />
                </div>
                <p class="item-name">{{ item.name || item.title }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "ContentList",
        // eslint-disable-next-line no-undef
        // mixins: [mixin],

        props: ["contentList"],
        methods: {
            goAlbum(item, type) {
                this.$store.commit("setTempList", item);
                if (type) {
                    //歌手
                    this.$router.push({
                        path: `singer-album/${item.id}`,
                    });
                } else {
                    //歌单
                    this.$router.push({
                        path: `song-list-album/${item.id}`,
                    });
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    .content-list {
        overflow: hidden;

        .section-content {
            padding: 0;

            .content-item {
                float: left;
                position: relative;
                width: 33%;
                height: 33%;

                .kuo {
                    width: 100%;
                    padding-bottom: 100%;
                    height: 0;
                    overflow: hidden;

                    .item-img {
                        width: 90%;
                        transition: all 0.4s ease;
                        border-radius: 5%;
                    }
                }

                .item-name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                    height: 2.625rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    margin: 10px 8px;
                }
            }
        }
    }

</style>
